<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-23 11:13:02
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-26 14:09:28
 * @Description: 
-->
<template>
  <div class="commen-layout">
    <el-container>
      <el-header>
        <Suspense>
          <NavBar />
        </Suspense>
      </el-header>
      <el-main>
        <RouterView
          v-slot="{ Component }"
          class="content-box"
          :key="route.fullPath"
        >
          <template v-if="Component">
            <KeepAlive>
              <Suspense>
                <!-- 主要内容 -->
                <Transition appear name="fade" mode="out-in">
                  <component :is="Component"></component>
                </Transition>
                <!-- 加载中状态 -->
                <template #fallback> 正在加载... </template>
              </Suspense>
            </KeepAlive>
          </template>
        </RouterView>
      </el-main>
    </el-container>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { useRoute, RouterView } from "vue-router";
import NavBar from "@/components/FrontEnd/NavBar.vue";
const route = useRoute();
</script>

<style lang='less' scoped>
.commen-layout {
  overflow-x: hidden;
  .el-header {
    height: var(--header-height);
    padding: 0 !important;
    position: fixed;
    z-index: 999;
    width: 100%;
    background: var(--color-background);
    top: 0;
  }
  .el-main {
    margin-top: var(--header-height);
    background: var(--el-bg-color-page);
    min-height: calc(100vh - 60px);
    height: auto;
    overflow-x: hidden;
    .content-box {
      width: 960px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transform: scale(1) translateX(0);
  transition: all 0.3s ease-out;
}
.fade-enter-from {
  transform: scale(3) translateX(-400px);
  opacity: 0;
}
.fade-leave-to {
  transform: scale(0.1) translateX(400px);
  opacity: 0;
}
</style>

